<template >
  <div>
    <template>
  <div class="demo-type" style="height: 100px;width: 100%;">
    <h1 data-spotlight="欢迎来到网上书城!" style="display: block;">
      <div @click="go_to_avatar_html">
        <el-avatar shape="square" :size="50" :src="squareUrl" id="avatar"></el-avatar>
        <span id="avatar">用户管理</span>
      </div>
    </h1>
    <div id="backgroud">
      <div class="shell">
        <div class="content">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div> 
    </div>
  </div>
</template>
    <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || 
    data.content.toLowerCase().includes(search.toLowerCase())||
    data.author.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%;">
    <el-table-column
      label="name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="author"
      prop="author">
    </el-table-column>
    <el-table-column prop="image" label="img">
                 <template   slot-scope="scope">            
                    <el-image ref="img" alt="图片未上传" :src="`http://localhost:8081/bookstore_servlet/image/upload/${scope.row.id}.png`"  min-width="70" height="40" 
                    style="height: 50px;"/>
                 </template>         
      </el-table-column> 
    <el-table-column
      label="price"
      prop="price">
    </el-table-column>
    <el-table-column
      label="content"
      prop="content">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header">
        <input
          v-model="search"
          id="search"
          placeholder="输入书名、作者名或内容搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button

          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button

          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button type="success" @click="to_cart(scope.row)" ref="to_cart">{{to_cart_mag}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <template>
        <el-button  @click="add_book" type="primary">添加</el-button>
        <el-button  @click="go_to_cart_html" type="primary">查看购物车</el-button>

        
        <el-dialog
          title="提示"
          :visible.sync="input_DialogVisible.centerDialogVisible"
          width="30%"
          center>
          <el-button type="primary" class="set_book_button">书名</el-button>
          <el-input
          v-model="input_tableData.name"
          size="" 
          placeholder="请输入书名：">
          </el-input>
          <el-button type="primary" class="set_book_button">作者</el-button>
          <el-input
          v-model="input_tableData.author"
          size="" 
          placeholder="请输入作者：">
          </el-input>
          <el-button type="primary" class="set_book_button">价格</el-button>
          <el-input
          v-model="input_tableData.price"
          size="" 
          placeholder="请输入价格："> 
          </el-input>
          <el-button type="primary" class="set_book_button">内容</el-button>
          <el-input
          v-model="input_tableData.content"
          size="" 
          placeholder="请输入主要内容：">
          </el-input>

          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="add_book_click">确 定</el-button>
          </span>
        </el-dialog>
      </template>

      <template>
        <el-drawer
          title="修改书籍"
          :visible.sync="edit_drawer"
          :with-header="false" id="drawer_body">
          <el-button type="primary" class="set_book_button">书名</el-button>
          <el-input
            v-model="input_tableData.name"
            size="" 
            placeholder="请输入书名：">
            </el-input>
            <el-button type="primary" class="set_book_button">作者</el-button>
            <el-input
            v-model="input_tableData.author"
            size="" 
            placeholder="请输入作者：">
            </el-input>
            <el-button type="primary" class="set_book_button">价格</el-button>
            <el-input
            v-model="input_tableData.price"
            size="" 
            placeholder="请输入价格："> 
            </el-input>
            <el-button type="primary" class="set_book_button">内容</el-button>
            <el-input
            v-model="input_tableData.content"
            size="" 
            placeholder="请输入主要内容：">
          </el-input>
          <el-upload
                class="upload-demo"
                action="/api/UploadServlet"
                :limit="1"
                :on-exceed="handleExceed"
                accept=".jpg, .png"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture-card">
                <el-button size="small" type="primary">点击上传书籍图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
        </el-drawer>
      </template>
    

      <router-link to="./">
        <el-button type="danger" class="outlogin">退出登录</el-button>
      </router-link>
      
      <div class="block" style="margin-top:15px;">
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || 
    data.content.toLowerCase().includes(search.toLowerCase())||
    data.author.toLowerCase().includes(search.toLowerCase())).length">
            </el-pagination>
      </div>

      <el-alert
    v-show="img_alert_isShow"
    title="只能添加一张图片"
    type="error"
    center
    show-icon>
  </el-alert>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
import axios from 'axios'
  export default {
    data() {
        return {
            input_tableData: {
                id: "",
                name: "",
                author: "",
                price: "",
                content: ""
            },
            search: '',
            input_DialogVisible: {
                //表示dialog可见与否
                centerDialogVisible: false,
            },
            edit_drawer: false,
            details_drawer: false,
            to_cart_mag: "添加到购物车",
            size: '',
            fileList: [],
            squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            currentPage: 1,
            total: 20,
            pageSize: 10,
            img_alert_isShow: false,
            edit_book: {
                index: "",
                book: {
                    id: "",
                    name: "",
                    author: "",
                    price: "",
                    content: ""
                }
            }
        };
    },
    computed: {
        tableData() {
            return this.$store.state.book_information.tableData;
        }
    },
    watch: {
        edit_drawer: {
            immediate: false,
            handler() {
                //console.log("xinde"+newVal,oldVal)
                if (this.edit_drawer == true) {
                    axios.get("/api/idUpdate", {
                        params: {
                            id: this.input_tableData.id
                        }
                    }).then(response => {
                        console.log(response);
                    }, err => {
                        console.log(err);
                    });
                }
                if (this.edit_drawer == false) {
                    this.$store.dispatch('book_information/set_tableData', this.edit_book);
                    this.fileList = [];
                    console.log(this.$refs.img)
                    this.$refs.img._watcher.preview = true
                }
            }
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
            this.edit_drawer = true;
            this.input_tableData = row;
            this.edit_book.book = row;
            this.edit_book.index = row.id;
            console.log(this.edit_book);
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.$store.dispatch('book_information/delete_tableData', { index, row });
        },
        add_book() {
            this.input_DialogVisible.flag = 1;
            this.input_tableData = { id: "", name: "", author: "", price: "", content: "" };
            this.input_DialogVisible.centerDialogVisible = true;
        },
        cancel() {
            this.input_DialogVisible.centerDialogVisible = false;
            this.edit_bookobj = { key: 0, row: {
                    id: "",
                    name: "",
                    author: "",
                    price: "",
                    content: ""
                } };
            this.input_tableData = { id: "", name: "", author: "", price: "", content: "" };
        },
        add_book_click() {
            this.input_tableData.id = nanoid();
            this.$store.dispatch('book_information/add_tableData', this.input_tableData);
            this.input_DialogVisible.centerDialogVisible = false;
            this.input_tableData = { id: "", name: "", author: "", price: "", content: "" };
        },
        see_details() {
            this.details_drawer = true;
        },
        go_to_avatar_html() {
            this.$router.push("/avatar");
        },
        go_to_cart_html() {
            this.$router.push("/shoppingCart");
        },
        to_cart(row) {
            console.log(this.$store.state.cart_information.goods);
            for (var item in this.$store.state.cart_information.goods) {
                if (this.$store.state.cart_information.goods[item].name == row.name) {
                    alert("该书籍已存在购物车中");
                    return;
                }
            }
            this.$store.dispatch('cart_information/add_cart', row);
        },
        handleClose() {
            console.log();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(this.fileList);
            console.log(file);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        handleExceed() {
            this.img_alert_isShow = true;
            setTimeout(() => { this.img_alert_isShow = false; }, 2000);
        },
        uploadFile() {
            axios.get("/api/idUpdate", {
                params: {
                    id: this.input_tableData.id
                }
            }).then(response => {
                console.log(response);
            }, err => {
                console.log(err);
            });
        }
    },
    mounted() {
        this.$store.dispatch("book_information/update_tableData");
    },
}
</script>

<style scoped>
  .outlogin{
    position: relative;
    margin-top: 2%;
    left: 90%;
  }
  .set_book_button{
    margin:20px 41%;
  }
  #search{
    width: 100%;
    height: 35px;
  }
   /* 定义外层容器样式 */
   .shell {
            position: relative;
            /* 相对定位 */
            width: 60vw;
            /* 宽度占视口宽度的60% */
            height: 40vw;
            /* 高度占视口高度的40% */
            max-width: 380px;
            /* 最大宽度为380像素 */
            max-height: 250px;
            /* 最大高度为250像素 */
            margin: 0;
            /* 外边距为0 */
            color: white;
            /* 字体颜色为白色 */
            perspective: 1000px;
            /* 透视效果，观察者与z=0平面的距离 */
            transform-origin: center;
            /* 变形原点为中心 */
        }

        /* 定义内容容器样式 */
        .content {
            display: flex;
            /* 设置为弹性盒子布局 */
            justify-content: center;
            /* 主轴居中对齐 */
            align-items: center;
            /* 交叉轴居中对齐 */
            position: absolute;
            /* 绝对定位 */
            width: 100%;
            /* 宽度100% */
            height: 100%;
            /* 高度100% */
            transform-origin: center;
            /* 变形原点为中心 */
            transform-style: preserve-3d;
            /* 保持3D变换 */
            transform: translateZ(-30vw) rotateY(0);
            /* 变换：沿z轴平移-30vw，绕y轴旋转0度 */
            animation: carousel 9s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
            /* 动画：名称为carousel，持续时间9秒，无限循环，缓动函数为cubic-bezier(0.77, 0, 0.175, 1)，动画结束后保持最后状态 */
        }

        /* 定义项目样式 */
        .item {
            position: absolute;
            /* 绝对定位 */
            width: 60vw;
            /* 宽度占视口宽度的60% */
            height: 40vw;
            /* 高度占视口高度的40% */
            max-width: 380px;
            /* 最大宽度为380像素 */
            max-height: 250px;
            /* 最大高度为250像素 */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            /* 设置阴影 */
            border-radius: 6px;
            /* 边框圆角半径为6像素 */
            background-size: cover;
            /* 背景图片等比例缩放并覆盖整个容器 */
            -webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
            /* 创建倒影效果 */
        }

        /* 第一个项目样式 */
        .item:nth-child(1) {
            background-image: url(../assets/background/preview1.jpg);
            /* 背景图片为01.jpg */
            transform: rotateY(0) translateZ(35vw);
            /* 变换：绕y轴旋转0度，沿z轴平移35vw */
        }

        /* 第二个项目样式 */
        .item:nth-child(2) {
            background-image: url(../assets/background/preview2.jpg);
            /* 背景图片为02.jpg */
            transform: rotateY(120deg) translateZ(35vw);
            /* 变换：绕y轴旋转120度，沿z轴平移35vw */
        }

        /* 第三个项目样式 */
        .item:nth-child(3) {
            background-image: url(../assets/background/preview3.jpg);
            /* 背景图片为03.jpg */
            transform: rotateY(240deg) translateZ(35vw);
            /* 变换：绕y轴旋转240度，沿z轴平移35vw */
        }

        /* 定义动画 */
        @keyframes carousel {

            0%,
            17.5% {
                transform: translateZ(-35vw) rotateY(0);
                /* 变换：沿z轴平移-35vw，绕y轴旋转0度 */
            }

            27.5%,
            45% {
                transform: translateZ(-35vw) rotateY(-120deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-120度 */
            }

            55%,
            72.5% {
                transform: translateZ(-35vw) rotateY(-240deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-240度 */
            }

            82.5%,
            100% {
                transform: translateZ(-35vw) rotateY(-360deg);
                /* 变换：沿z轴平移-35vw，绕y轴旋转-360度 */
            }
        } 
        #backgroud{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
            background-image: linear-gradient(to top, white 0%, #67C23A 100%);
            overflow: hidden; 
        }
        h1 {
          color: #333;
          font-family: Helvetica;
          margin: 0;
          padding: 0;
          font-size: 5rem;
          letter-spacing: -0.3rem;
          position: relative;
          background-color: #67C23A;
          display: flex;
          justify-content: center;
          align-items: center; 
}

h1::after {
  content: attr(data-spotlight);
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: ellipse(100px 100px at 0% 50%);
  clip-path: ellipse(100px 100px at 0% 50%);
  animation: spotlight 5s infinite;
  background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
  background-size: 150%;
  background-position: center center;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes spotlight {
  0% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
  
  50% {
    -webkit-clip-path: ellipse(100px 100px at 100% 50%);
    clip-path: ellipse(100px 100px at 100% 50%);
  }
  
  100% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
}
#avatar{
  position:relative;
  left: 93%;
  font-size: 20px;
  word-spacing:normal;
  font-family: 'Courier New', Courier, monospace;
  font-weight: normal;
}
</style>